<template>
	<view class="middle-section">

    <!-- 排序方式 -->
    <scroll-view class="sort-tabs" scroll-x>
      <text 
		  class="sort-tab" 
		  :class="{active: activeTab === 'latest'}"
		  @click="activeTab = 'latest'"
		>最新</text>
		<text 
		  class="sort-tab" 
		  :class="{active: activeTab === 'popular'}"
		  @click="activeTab = 'popular'"
		>最多人点赞</text>
		<text class="sort-tab" style="float: right;" @click="starTag">收藏标签</text>
    </scroll-view>

    <!-- 瀑布流内容 -->
    <view class="content-grid">
      <view class="content-item" v-if="latestItems &&  activeTab === 'latest'" v-for="(item, index) in latestItems" :key="index"
			@click="goToPage(`/pages/post/post-1/post-1?postId=${encodeURIComponent(item.postId)}`)">
				<image class="item-image" :src="item.image" alt="没有图片">
          <text class="image-tag">{{ item.tag }}</text>
        </image>
        <text class="item-title">{{ item.title }}</text>
        <view class="item-info">
          <text class="author">{{ item.nickName }}</text>
          <text class="hearts">{{ item.likeCount }}</text>
        </view>
      </view>
			<view class="content-item" v-if="popularItems &&  activeTab === 'popular'" v-for="(item, index) in popularItems" :key="index"
			@click="goToPage(`/pages/post/post-1/post-1?postId=${encodeURIComponent(item.postId)}`)">
			  <image class="item-image" :src="item.image" alt="没有图片">
			    <text class="image-tag">{{ item.tag }}</text>
			  </image>
			  <text class="item-title">{{ item.title }}</text>
			  <view class="item-info">
			    <text class="author">{{ item.nickName }}</text>
			    <text class="hearts">{{ item.likeCount }}</text>
			  </view>
			</view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '../../../utils/request'

const latestItems = ref([])
const popularItems =ref([])
const tagId = ref()

onLoad( async (options)=>{
	tagId.value = options.tagId;
	const tagName = options.tagName; 
	
	// 设置导航栏标题
	uni.setNavigationBarTitle({
		title: `和 ${tagName} 有关的帖子`
	})
	
	const res1 = await http.get('/posts/by-tag-and-likes/'+tagId.value)
	const res2 = await http.get('/posts/by-tag-and-date/'+tagId.value)
	popularItems.value.push(...res1.data)
	latestItems.value.push(...res2.data)
	console.log(popularItems.value);
	console.log(latestItems.value);
})

const goToPage = (url) => {
  if (!url) return
  uni.navigateTo({
    url
  })
}

const starTag = async () => {
	const res = await http.post('/api/tag/favorite/favorite',{
		tagId: tagId.value
	})
	console.log(res);
}

const activeTab = ref('latest')


const contentItems = computed(() => {
  return activeTab.value === 'latest' ? latestItems : popularItems
})

</script>

<style>
.sort-tabs {
  padding: 10px 12px;
  white-space: nowrap;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.sort-tab {
  display: inline-block;
  padding: 6px 16px;
  margin-right: 10px;
  border-radius: 16px;
  background-color: #f5f5f5;
  color: #666;
  font-size: 14px;
  transition: all 0.3s;
}

.sort-tab.active {
  background-color: #007AFF;
  color: #fff;
}
.middle-section {
  flex: 1;
  background-color: #f8f8f8;
}


/* 导航栏容器 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

/* 导航主体布局 */
.nav-body {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

/* 图标容器通用样式 */
.nav-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 选项卡样式 */
.tabs {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.tab-item {
  font-size: 16px;
  color: #666;
  position: relative;
  transition: color 0.3s;
}

/* 选中状态 */
.tab-item.active {
  color: #007AFF;
  font-weight: 500;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 20px;
  height: 2px;
  background: #007AFF;
  transform: translateX(-50%);
}

/* 模拟图标（实际建议使用字体图标） */
.iconfont {
  font-size: 22px;
}
.icon-focus::before { content: "★"; color: #007AFF; }
.icon-search::before { content: "🔍"; }

.category-scroll {
  padding: 12px 0;
  white-space: nowrap;
  background-color: #fff;
}

.category-tag {
  display: inline-block;
  padding: 4px 16px;
  margin: 0 6px;
  border-radius: 14px;
  background-color: #f0f0f0;
  color: #666;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px;
}

.content-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.content-item.big {
  grid-column: span 2;
}

.item-image {
  width: 100%;
  height: 200px;
  position: relative;
}

.image-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.item-title {
  display: block;
  padding: 8px;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.item-info {
  display: flex;
  justify-content: space-between;
  padding: 0 8px 8px;
  font-size: 12px;
  color: #666;
}
.hearts:before{
  content: "♥ ";
  color: #FF2442;
}



</style>
